<template>
	<view class="container">
		<view class="header">
			<view class="title">神算大师</view>
			<view class="subtitle">探索命运奥秘，把握人生方向</view>
		</view>

		<view class="tabs">
			<view class="tab" :class="{ active: activeTab === 'daily' }" @click="switchTab('daily')">
				今日运势
			</view>
			<view class="tab" :class="{ active: activeTab === 'weekly' }" @click="switchTab('weekly')">
				本周运势
			</view>
			<view class="tab" :class="{ active: activeTab === 'love' }" @click="switchTab('love')">
				爱情运势
			</view>
			<view class="tab" :class="{ active: activeTab === 'career' }" @click="switchTab('career')">
				事业运势
			</view>
		</view>

		<view class="content">
			<view class="result-container" v-if="result">
				<view class="result-title">
					{{ tabTitles[activeTab] }}
				</view>
				<view class="result-content">
					{{ result.content }}
				</view>
				<view class="result-details">
					<view class="detail-item">
						<text class="detail-label">幸运指数：</text>
						<view class="star-container">
							<text class="star" v-for="i in result.luck" :key="i">★</text>
							<text class="star gray" v-for="i in 5 - result.luck" :key="i">☆</text>
						</view>
					</view>
					<view class="detail-item">
						<text class="detail-label">幸运颜色：</text>
						<view class="color-block" :style="{ backgroundColor: result.color }"></view>
						<text class="color-name">{{ result.colorName }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">幸运数字：</text>
						<text class="number">{{ result.number }}</text>
					</view>
				</view>
			</view>

			<view class="empty-state" v-else>
				<!-- <image src="/static/logo.png" mode="aspectFit"></image> -->
				<text class="empty-text">点击下方按钮开始测算</text>
			</view>
		</view>

		<button class="calculate-btn" @click="calculateFortune">
			<text class="btn-text">开始测算</text>
			<text class="btn-icon">🔮</text>
		</button>

		<view class="history-container">
			<view class="history-title">历史记录</view>
			<scroll-view class="history-list" scroll-y>
				<view class="history-item" v-for="(item, index) in history" :key="index">
					<view class="history-header">
						<text class="history-type">{{ tabTitles[item.type] }}</text>
						<text class="history-time">{{ item.time }}</text>
					</view>
					<view class="history-content">{{ item.content }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'daily',
				result: null,
				history: [],
				tabTitles: {
					'daily': '今日运势',
					'weekly': '本周运势',
					'love': '爱情运势',
					'career': '事业运势'
				},
				fortuneData: {
					daily: [{
							content: "今天是适合社交的一天，可能会遇到一些有趣的人，有机会拓展你的人脉圈。工作上可能会有一些小的挑战，但只要保持积极的态度都能顺利解决。财运平平，注意理性消费。",
							luck: 4,
							color: "#FFD700",
							colorName: "金色",
							number: 7
						},
						{
							content: "今天可能会有些小疲惫，需要注意休息。工作上按部就班即可，不要过于冒进。感情方面，多和伴侣沟通，避免误会。财运方面，可能会有一些意外的小开支。",
							luck: 3,
							color: "#808080",
							colorName: "灰色",
							number: 3
						},
						{
							content: "今天是幸运的一天，可能会有意外之喜降临。工作上会有新的机遇出现，要积极把握。感情方面，单身者可能会遇到心仪的对象，有伴者感情会更加甜蜜。财运不错，可能会有一些额外的收入。",
							luck: 5,
							color: "#FF4500",
							colorName: "橙色",
							number: 8
						}
					],
					weekly: [{
							content: "本周整体运势不错，工作上会有一些进展，可能会得到上级的认可。感情方面，要多花时间陪伴家人和朋友。财运方面，有机会获得一些小的投资回报，但要注意风险。",
							luck: 4,
							color: "#00BFFF",
							colorName: "蓝色",
							number: 5
						},
						{
							content: "本周可能会遇到一些小麻烦，工作上会有一些压力，要学会调整自己的心态。感情方面，要多理解和包容对方。财运方面，要注意合理规划开支，避免不必要的消费。",
							luck: 3,
							color: "#A52A2A",
							colorName: "棕色",
							number: 2
						},
						{
							content: "本周是充满机遇的一周，工作上会有新的项目启动，要积极表现自己。感情方面，会有一些浪漫的事情发生，要好好把握。财运方面，会有一些意外的收入，可能是奖金或者礼物。",
							luck: 5,
							color: "#9370DB",
							colorName: "紫色",
							number: 9
						}
					],
					love: [{
							content: "爱情运势不错，单身者有机会遇到心仪的对象，但要主动出击，不要过于害羞。有伴者感情会更加稳定，可能会有一些浪漫的约会或者惊喜。",
							luck: 4,
							color: "#FF69B4",
							colorName: "粉色",
							number: 6
						},
						{
							content: "爱情运势一般，单身者可能会感到有些孤单，要多参加一些社交活动，扩大自己的社交圈。有伴者可能会因为一些小事而产生矛盾，要多沟通和理解。",
							luck: 3,
							color: "#8B0000",
							colorName: "深红色",
							number: 4
						},
						{
							content: "爱情运势极佳，单身者可能会有一段浪漫的邂逅，要保持开放的心态。有伴者感情会更加甜蜜，可能会有一些重要的决定或者承诺。",
							luck: 5,
							color: "#FF1493",
							colorName: "深粉色",
							number: 1
						}
					],
					career: [{
							content: "事业运势不错，工作上会有一些新的机会出现，要积极争取。可能会有一些合作项目，要与同事保持良好的沟通和协作。财运方面，会有一些小的提升。",
							luck: 4,
							color: "#228B22",
							colorName: "绿色",
							number: 7
						},
						{
							content: "事业运势一般，工作上可能会遇到一些小的挫折，要保持耐心和毅力。可能会有一些人际关系方面的问题，要学会处理和化解矛盾。财运方面，要注意节约开支。",
							luck: 3,
							color: "#CD853F",
							colorName: "秘鲁色",
							number: 3
						},
						{
							content: "事业运势极佳，工作上会有重大的突破和进展，可能会得到晋升或者加薪的机会。要充分发挥自己的才能和潜力，抓住机遇。财运方面，会有明显的提升。",
							luck: 5,
							color: "#4169E1",
							colorName: "皇家蓝",
							number: 8
						}
					]
				}
			}
		},
		methods: {
			switchTab(tab) {
				this.activeTab = tab;
				// 如果已经有该类型的结果，直接显示
				const historyItem = this.history.find(item => item.type === tab);
				if (historyItem) {
					this.result = {
						content: historyItem.content,
						luck: historyItem.luck,
						color: historyItem.color,
						colorName: historyItem.colorName,
						number: historyItem.number
					};
				} else {
					this.result = null;
				}
			},
			calculateFortune() {
				// 模拟加载效果
				uni.showLoading({
					title: '正在测算...',
					mask: true
				});

				setTimeout(() => {
					const fortunes = this.fortuneData[this.activeTab];
					const randomIndex = Math.floor(Math.random() * fortunes.length);
					this.result = fortunes[randomIndex];

					// 添加到历史记录
					const now = new Date();
					const timeStr = now.getFullYear() + '-' +
						(now.getMonth() + 1).toString().padStart(2, '0') + '-' +
						now.getDate().toString().padStart(2, '0') + ' ' +
						now.getHours().toString().padStart(2, '0') + ':' +
						now.getMinutes().toString().padStart(2, '0');

					this.history.unshift({
						type: this.activeTab,
						content: this.result.content,
						luck: this.result.luck,
						color: this.result.color,
						colorName: this.result.colorName,
						number: this.result.number,
						time: timeStr
					});

					// 最多保存10条历史记录
					if (this.history.length > 10) {
						this.history.pop();
					}

					// 保存到本地存储
					uni.setStorage({
						key: 'fortuneHistory',
						data: this.history
					});

					uni.hideLoading();

					// 显示成功提示
					uni.showToast({
						title: '测算完成',
						icon: 'success',
						duration: 2000
					});
				}, 1500);
			}
		},
		onLoad() {
			// 从本地存储加载历史记录
			uni.getStorage({
				key: 'fortuneHistory',
				success: (res) => {
					if (res.data && Array.isArray(res.data)) {
						this.history = res.data;
					}
				},
				fail: () => {
					// 首次加载，没有历史记录
					this.history = [];
				}
			});
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		background-color: #f8f5f0;
		min-height: 100vh;
	}

	.header {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #6a3906;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 24rpx;
		color: #8c6a42;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;
	}

	.tab {
		padding: 15rpx 25rpx;
		font-size: 28rpx;
		border-radius: 30rpx;
		color: #6a3906;
		border: 2rpx solid #6a3906;
		transition: all 0.3s;
	}

	.tab.active {
		background-color: #6a3906;
		color: white;
	}

	.content {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.result-container {
		text-align: center;
	}

	.result-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #6a3906;
		margin-bottom: 20rpx;
	}

	.result-content {
		font-size: 28rpx;
		color: #333;
		text-align: left;
		line-height: 1.6;
		margin-bottom: 30rpx;
	}

	.result-details {
		text-align: left;
	}

	.detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		font-size: 26rpx;
	}

	.detail-label {
		color: #6a3906;
		margin-right: 15rpx;
	}

	.star-container {
		display: flex;
		color: #FFD700;
	}

	.star.gray {
		color: #ccc;
	}

	.color-block {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.number {
		color: #6a3906;
		font-weight: bold;
	}

	.empty-state {
		text-align: center;
		padding: 40rpx 0;
	}

	.empty-state image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #888;
	}

	.calculate-btn {
		background-color: #6a3906;
		color: white;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 50rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-text {
		margin-right: 15rpx;
	}

	.history-container {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.history-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #6a3906;
		margin-bottom: 20rpx;
	}

	.history-list {
		max-height: 400rpx;
	}

	.history-item {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #eee;
	}

	.history-item:last-child {
		border-bottom: none;
	}

	.history-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.history-type {
		font-size: 26rpx;
		font-weight: bold;
		color: #6a3906;
	}

	.history-time {
		font-size: 22rpx;
		color: #888;
	}

	.history-content {
		font-size: 24rpx;
		color: #555;
	}
</style>